<template>
    <div class="classic">
        <ul>
            <li v-for="item in list" :key="item.id">
                <img :src="item.imgUrl" :alt="item.id">
            </li>
        </ul>
    </div>
</template>


<script>
export default {
    data(){
        return{
            list:[
                {
                    "id":"01",
                    "imgUrl":require("@/assets/img/classic/nav_1.png")
                },
                {
                    "id":"02",
                    "imgUrl":require("@/assets/img/classic/nav_2.png")
                },
                {
                    "id":"03",
                    "imgUrl":require("@/assets/img/classic/nav_3.png")
                },
                {
                    "id":"04",
                    "imgUrl":require("@/assets/img/classic/nav_4.png")
                }
            ]
        }
    }
}
</script>

<style scoped>
ul{
    display: flex;
    margin: 3% 0;
    justify-content: space-around;
}
li{
    width: 23%;
}
img{
    height: 100%;
    width: 100%;
}
</style>
